<template>
	<view>
		<page-head :title="'邀请好友'" :headtype="2"></page-head>
		<image class="bg" :src="apifun.serveimg+'invitebg.png'" :style="'top:'+statusheadheight+'px'" mode="widthFix">
		</image>
		<view class="qrcode">
			<image @click="apifun.maxphotofun(qrcodeurl)" :src="qrcodeurl" mode=""></image>
			<!-- <canvas id="canvas" canvas-id="canvas" class="canvas"></canvas> -->
		</view>
		<view class="invitebtn" @click="cavephoto()">
			<image :src="apifun.serveimg+'invitebtn.png'" mode=""></image>
			<view class="invitebtntxt">保存海报</view>
		</view>
	</view>
</template>

<script>
	import uqrcode from '@/public/uqrcode.js'
	export default {
		data() {
			return {
				apifun:this.apifun,
				statusheadheight: uni.getStorageSync('ClientRectTop') + uni.getStorageSync('ClientRectHeight'),
				apifun: this.apifun,
				qrcodeurl: ''
			};
		},
		onLoad() {
			this.getcode()
		},
		methods: {
			cavephoto() {
				const qrcodeurl = this.qrcodeurl;
				uni.downloadFile({
					url:qrcodeurl,
					success:(res)=>{
						if(res.statusCode == 200){
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									this.apifun.toast('图片保存成功')
								}
							})
						}
					}
				})
			},
			getcode() {
				this.apifun.unirequest('/api/user/getUserQrcode','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.qrcodeurl = this.apifun.URLimg+datas.qrcode;
					}else{
						this.apifun.toast(res.msg)
					}
				})
				// uqrcode.make({
				// 	canvasId: 'canvas',
				// 	text: "123132",
				// 	size: 120,
				// }).then((res) => {
				// 	console.log(res)
				// 	this.qrcodeurl = res
				// })
			}
		},
	};
</script>

<style scoped lang="scss">
	.bg {
		position: fixed;
		left: 0;
		z-index: 0;
		width: 100vw;
	}

	.qrcode {
		position: absolute;
		left: 50%;
		top: 540rpx;
		padding: 10rpx;
		width: 240rpx;
		height: 240rpx;
		margin-left: -130rpx;
		image{
			width: 240rpx;
			height: 240rpx;
		}
	}

	.invitebtn {
		position: absolute;
		width: 400rpx;
		height: 100rpx;
		left: 50%;
		margin-left: -200rpx;
		top: 950rpx;

		image {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 400rpx;
			height: 100rpx;
		}

		.invitebtntxt {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			width: 400rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #F13730;
		}
	}
</style>